<template>
  <el-card shadow="never">
    <div slot="header" class="clearfix">
      <span>排课列表</span>
    </div>
    <div id="course-scheduling-list">
      <el-form inline>

        <br/>

        <el-form-item label="教室">
          <el-select ref="classroomSelect" value="" v-on:change="test(xqs)" class="form-item" v-model="xqs">
            <el-option  v-for="item in classroomData" :key="item.id" :label="item.name" :value="item.address" >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" style="margin-left: 50px;">
          <el-select ref="courseSelect" value="" v-on:change="SelectByCid(className)"  class="form-item" v-model="className">
            <el-option v-for="item in courseData" :key="item.id" :label="item.name" :value="item.className">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="老师" style="margin-left: 50px;">
          <el-select ref="teacherSelect" value="" v-on:change="SelectByTid(teacherName)"  class="form-item" v-model="teacherName">
            <el-option v-for="item in teacherData" :key="item.id" :label="item.name" :value="item.teacherName">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
     </el-container>
     <el-main v-if="a!=''" style="padding: 10px 20px;">

       <div class="hello">
        <table class="tablehead">
         <tr>
          <th></th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
          <th>周六</th>
          <th>周日</th>
         </tr>
         <tr v-for="(item,index) in a" v-model="a">
          <td>第{{index+1}}大节</td>
          <template v-for="(items,k) in item">
           <td style="text-align: left;">
            <p v-if="items!=null">班级：{{items.className}}</p >
            <p v-if="items!=null">课程：{{items.cName}}</p >
            <p v-if="items!=null">教师：{{items.teacherName}}</p >
            <p v-if="items!=null">教室：{{items.address}}</p >
           </td>
          </template>
         </tr>
        </table>
       </div>
        </el-main>
  </el-card>
</template>

<script>
import { mapActions } from 'vuex'
import moment from 'moment'

export default {
  name: 'CourseSchedulingList',

  data () {
    return {
      a:"",
      className:'',
      teacherName:'',
      xqs: '',
      currentVisible: false,
      data: [],
      classroomData: [],
      courseData: [],
      teacherData: [],
      params: {},
      idList: [],
      datePickerOptions: {
        firstDayOfWeek: 1
      },
      timePickerOptions: {
        start: '07:00',
        step: '00:' + this.$consts.COURSE_DURATION_STEP_MINUTE,
        end: '20:00'
      }
    }
  },
  methods: {
    ...mapActions(['GetClassroomRefList', 'GetCourseRefList', 'GetTeacherRefList', 'GetCourseSchedulingList', 'RemoveCourseSchedulingByIdList']),
    init () {
      this.GetClassroomRefList().then(res => {
        if (res) {
          console.log(res)
          this.classroomData = res
        }
      }).catch(() => {
      })
      this.GetCourseRefList().then(res => {
        if (res) {
          console.log(res)
          this.courseData = res
        }
      }).catch(() => {
      })
      this.GetTeacherRefList().then(res => {
        if (res) {
          console.log(res)
          this.teacherData = res.list
        }
      }).catch(() => {
      })

      this.params.startDate = moment().startOf('month').format('YYYY-MM-DD')
      this.params.endDate = moment().endOf('month').format('YYYY-MM-DD')
      this.$set(this.params, 'dates', [this.params.startDate, this.params.endDate])
      this.search()
    },
    search () {
      if (this.params.dates && this.params.dates.length > 0) {
        this.params.startDate = this.params.dates[0]
        this.params.endDate = this.params.dates[1]
      }
      this.GetCourseSchedulingList(this.params).then(res => {
        if (res) {
          this.data = res
          console.log(this.data)
        }
      }).catch(() => {
      })
    },
    reset () {
      this.params = {}
      this.params.startDate = moment().startOf('month').format('YYYY-MM-DD')
      this.params.endDate = moment().endOf('month').format('YYYY-MM-DD')
      this.$set(this.params, 'dates', [this.params.startDate, this.params.endDate])
      this.search()
    },
    test (address) {
      this.className = ''
      this.teacherName = ''
      console.log(address)
      this.$axios.get('http://localhost:8080/selectCidKb', { params: { name: address } }).then(res => {
        console.log(res.data)
        this.a=res.data
      })
    },
    SelectByCid (cname) {
      this.xqs=''
      this.teacherName=''
      console.log(cname)
      this.$axios.get('http://localhost:8080/selectClassKb', { params: { name: cname } }).then(res => {
        console.log(res.data)
        this.a=res.data
      })
    },
    SelectByTid (tid) {
      this.xqs = ''
      this.className = ''
      console.log(tid)
      this.$axios.get('http://localhost:8080/selectTeacherKb', { params: { name: tid } }).then(res => {
        console.log(res.data)
        this.a=res.data
      })
    },
    remove () {
      if (this.idList && this.idList.length > 0) {
        this.$confirm('确定要删除这 ' + this.idList.length + ' 条数据么', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.RemoveCourseSchedulingByIdList(this.idList).then(res => {
            this.search()
          }).catch()
        }).catch(() => {})
      }
    },
    handleSelectionChange (val) {
      this.idList = []
      if (val && val.length > 0) {
        val.forEach(item => {
          this.idList.push(item.id)
        })
      }
    },  
    doPK(){
      this.$axios.get('http://localhost:8080/pk', {params:{}})
    },
  },

  mounted () {
    this.init()
    this.doPK()
  }
}
</script>

<style>
#course-scheduling-list .el-form-item {
  margin-bottom: 0;
}
#course-scheduling-list .form-item {
  width: 240px;
}
table tr:nth-of-type(1) {
  font-size: 15px;
  background-color: #F2F2F2;
  height: 40px;
 }

 table tr {
  text-align: center;
  font-size: 13px;
  height: 40px;
  border: 1px solid black;
 }
 table th{
  border: 1px solid black;
 }
 table td {
  width: 120px;
  border: 1px solid black;
 }

 table {
  color: #707A86;
  border-collapse: collapse;
  width: 960px;
  text-align: center;
 }
</style>
